/* eslint-disable no-unused-vars */
/* eslint-disable react-refresh/only-export-components */
import React, { useState } from "react";
import styles from "./css/city.module.css";
import { NavBar, SearchBar, Button, Grid, Toast } from "antd-mobile";
import { IndexBar, List } from "antd-mobile";
import { useLoaderData, useNavigate } from "react-router-dom";
import { getCity, getHot, getLocation } from "../../api/info";
import { LocationFill } from "antd-mobile-icons";
import { useFd } from "../../hooks";
import { useDispatch, useSelector } from "react-redux";
import { saveCity } from "../../store/Slice/ticketSlice";
function Index() {
  let nav = useNavigate();
  let { location, hot, list } = useLoaderData();
  let history = useSelector((store) => store.ticket.history);
  console.log(history);
  //防抖hooks
  let fd = useFd();
  let [kw, setKw] = useState();
  let [info, setInfo] = useState([]);
  const search = fd(async (kw) => {
    setKw(kw);

    try {
      let { data: info } = await getCity(kw);
      setInfo(info);
    } catch {
      console.log(111);
    }
  });
  let dis = useDispatch();
  const click = (kw) => {
    dis(saveCity(kw));
  };
  return (
    <div className={styles.citybox}>
      <NavBar
        className={styles.nav}
        style={{ background: "#f5f5f5" }}
        onBack={() => nav(-1)}
      >
        <SearchBar
          style={{ "--background": "#fff" }}
          placeholder="输入城市名称"
          onChange={search}
        />
        <span style={{ position: "fixed", top: "10px", right: "12px" }}>
          <Button color="primary" size="mini">
            搜索
          </Button>
        </span>
      </NavBar>
      <div>
        <List style={{ "--border-bottom": "none", "--border-top": "none" }}>
          {info.map((item, i) => (
            <List.Item
              onClick={() => {
                return click(item.name);
              }}
              key={i}
            >
              {item.name}
            </List.Item>
          ))}
        </List>
      </div>
      <div className={styles.locabox}>
        <h4>
          <LocationFill color="#7c26ca" fontSize={22} />
          当前城市：{location}
        </h4>
      </div>
      <div className={styles.hotbox}>
        <div>
          <h4 style={{ marginBottom: "10px" }}>最近访问</h4>
          <Grid columns={4} gap={8}>
            {history.map((item, i) => (
              <Grid.Item key={i} className={styles["grid-demo-item-block"]}>
                {item}
              </Grid.Item>
            ))}
          </Grid>
        </div>
        <div>
          <h4 style={{ margin: "10px 0" }}>热门城市</h4>
          <Grid columns={4} gap={8}>
            {hot.map((item, i) => (
              <Grid.Item key={i} className={styles["grid-demo-item-block"]}>
                {item.name}
              </Grid.Item>
            ))}
          </Grid>
        </div>
      </div>
      <div className={styles.listbox}>
        <IndexBar>
          {list.map((group) => {
            const { title, items } = group;
            return (
              <IndexBar.Panel index={title} title={title} key={title}>
                <List>
                  {items.map((item, index) => (
                    <List.Item key={index}>{item.name}</List.Item>
                  ))}
                </List>
              </IndexBar.Panel>
            );
          })}
        </IndexBar>
      </div>
    </div>
  );
}

export default Index;
export const loader = async () => {
  let { data: ree } = await getLocation();
  let { data: res } = await getHot();
  return { location: ree.city, hot: res.hotCities, list: res.cityList };
};
